import React, { useEffect, useState, useRef } from 'react';
import './css/begin.scss'
import IconFont from './Tubiao';
import { useNavigate, useLocation } from 'react-router-dom';
import { Sticky, Cell, Card, ProductCard, Dialog } from 'react-vant';
import { CountDown } from '@nutui/nutui-react'
import axios from 'axios';



export default function Begin() {
  const navigate = useNavigate()
  const stateRef = useRef({
    remainingTime: 60 * 15000,
  })
  const location = useLocation()
  console.log(location);
  const [sta, setstatus] = useState(location.state ? location.state.status : 3)
  const [id, setid] = useState(location.state ? location.state._id : 1)
  const quxiao = async (_id) => {
    let obj = { _id }
    let { data } = await axios.post('/orderquxiao', obj)
    if (data.code == 200) {
      getorder()
    }
  }

  const shan = async (_id) => {
    let obj = { _id }
    let { data } = await axios.post('/ordershan', obj)
    if (data.code == 200) {
      getorder()
    }
  }
  const queren = async (_id) => {
    let obj = { _id }
    let { data } = await axios.post('/orderqueren', obj)
    if (data.code == 200) {
      getorder()
    }
  }
  
  const [orderlist, setorderlist] = useState([])
  const getorder = async () => {
    let { data } = await axios.get('/getorder')
    setorderlist(data.orderlist)
  }
  return (
    <div className='div'>
      <Sticky>
        <div className='top'>
          <span className='icon' onClick={() => (navigate('/app/my'))}>
            <IconFont name='icon-arrowLeft'></IconFont>
          </span>
          <span>订单详情</span>
        </div>
      </Sticky>
      <div className='colorwall'>
        {sta == 1 && '等待卖家付款'}
        {sta == 2 && '等待卖家收货'}
        {sta == 3 && '等待卖家取票'}
        {sta == 4 && '卖家取消订单 交易关闭'}
        {sta == 5 && '卖家确认收货 交易完成'}
      </div>
      <div className='info'>
        <p className='drama'><img alt='' src='.././1.png'></img></p>
        <p className='title'>舞台剧东野圭吾【虚无的十字架】</p>
        <p className='content'>上海市1862时尚艺术中心3楼</p>
        <p className='time'>2024年07月17日 19:00</p>
      </div>
      <div className='peopleinfo'>
        <Cell title='李小明' value='￥600' label='A机票 A区 8排 101' />
        <Cell title='王汉文' value='￥600' label='A机票 A区 8排 102' />
      </div>
      <div className='countprice'>
        <Cell title='商品总价' value='￥599.00' />
        <Cell title='运费' value='￥0.00' />
        <Cell title='优惠券' value='-￥9.00' />
        <Cell title='' value='实付款 ￥590.00' />
      </div>
      <div className='anniu'>
        {sta == 1 && <p>
          <span style={{ border: '1px solid', padding: '3px', borderRadius: '5px' }} onClick={() =>
            Dialog.confirm({
              message: '确认要取消吗?',
              closeable: true,
              onCancel: () => console.log('cancel'),
              onConfirm: () => (quxiao(id))
            })
          }>取消订单</span>
          <span style={{ border: '1px solid', padding: '3px', color: '#FF6262', borderRadius: '5px' }}>
            去支付
            <CountDown style={{ display: 'inline-block' }} remainingTime={stateRef.current.remainingTime} />
          </span>
        </p>}
        {sta == 2 && <p>
          <span style={{ border: '1px solid', padding: '3px', borderRadius: '5px' }}
            onClick={() => (navigate('/wuliu'))}
          >查看物流</span>
          <span style={{ border: '1px solid', padding: '3px', borderRadius: '5px' }} onClick={() =>
            Dialog.confirm({
              message: '确认要收货吗?',
              closeable: true,
              onCancel: () => console.log('cancel'),
              onConfirm: () => (queren(id))
            })
          }>取消订单</span>
        </p>}
        {sta == 3 && <p>
          <span style={{ border: '1px solid', padding: '3px', color: '#FF6262', borderRadius: '5px' }}>
            二维码
          </span>
        </p>}
        {sta == 4 && <p>
          <span style={{ border: '1px solid', padding: '3px', borderRadius: '5px' }} onClick={() =>
            Dialog.confirm({
              message: '确认要删除吗?',
              closeable: true,
              onCancel: () => console.log('cancel'),
              onConfirm: () => (shan(id))
            })
          }>删除订单</span>
        </p>}
        {sta == 5 && <p>
          <span style={{ border: '1px solid', padding: '3px', borderRadius: '5px' }}
            onClick={() => (navigate('/wuliu'))}
          >查看物流</span>
          <span style={{ border: '1px solid', padding: '3px', color: '#FF6262', borderRadius: '5px' }}>
            去评价
          </span>
        </p>}
      </div>
    </div>
  )
}
